<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>考研助手 - 登录注册</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awwesome.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/vue2.0.js"></script>
    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/particles.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="particles" id="particles-js"></div>
        <!-- 新增提示信息的 div -->
        <div id="message-box" class="alert" role="alert" style="display: none;"></div>

        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <!-- 登录表单 -->
                    <div class="auth-container mb-5" id="login-container">
                        <div class="auth-header">
                            <h2><i class="fas fa-graduation-cap me-2"></i>考研助手登录</h2>
                        </div>
                        <div class="auth-form">
                            <form id="login-form">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="login-username" placeholder="用户名"
                                        required  v-model="loginInfo">
                                    <label for="login-username">用户名/手机号/邮箱</label>
                                    <div class="invalid-feedback">请输入用户名/手机号/邮箱</div>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="password" class="form-control" id="login-password" placeholder="密码" 
                                        required v-model="loginPass">
                                    <label for="login-password">密码</label>
                                    <div class="invalid-feedback">请输入密码</div>
                                </div>
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="remember-me">
                                    <label class="form-check-label" for="remember-me">记住密码</label>
                                </div>
                                <button type="button" class="btn btn-primary w-100 mb-3"
                                    @click="login()">登录</button>
                                <div class="text-center">
                                    还没有账号？<span class="toggle-form" onclick="showRegister()">立即注册</span>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 注册表单 -->
                    <div class="auth-container d-none" id="register-container">
                        <div class="auth-header">
                            <h2><i class="fas fa-user-plus me-2"></i>考研助手注册</h2>
                        </div>
                        <div class="auth-form">
                            <form id="register-form">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="register-username" placeholder="用户名"
                                        required minlength="4" maxlength="16" v-model="userName">
                                    <label for="register-username">用户名</label>
                                    <div class="invalid-feedback">用户名应为4-16位字符</div>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="email" class="form-control" id="register-email" placeholder="邮箱"
                                        required v-model="userEmail">
                                    <label for="register-email">邮箱</label>
                                    <div class="invalid-feedback">请输入有效的邮箱地址</div>
                                </div>
                                <!-- 新增手机号输入字段 -->
                                <div class="form-floating mb-3">
                                    <input type="tel" class="form-control" id="register-phone" placeholder="手机号"
                                        required v-model="userPhone">
                                    <label for="register-phone">手机号</label>
                                    <div class="invalid-feedback">请输入有效的手机号</div>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="password" class="form-control" id="register-password" placeholder="密码"
                                        required minlength="6" v-model="userPass">
                                    <label for="register-password" >密码</label>
                                    <div class="invalid-feedback">密码至少6位</div>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="password" class="form-control" id="register-confirm-password"
                                        placeholder="确认密码" required v-model="Confirmpassword">
                                    <label for="register-confirm-password">确认密码</label>
                                    <div class="invalid-feedback">两次密码不一致</div>
                                </div>
                                <button type="submit" class="btn btn-primary w-100 mb-3" @click="reg()">注册</button>
                                <div class="text-center">
                                    已有账号？<span class="toggle-form" @click="login()">立即登录</span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/font-awesome.js"></script>
    <script src="js/login.js">

    </script>
</body>

</html>